<template>
  <div class="vpt-tag"
       :class="typeClass"
       :style="tagStyle">
    <slot>{{ text }}</slot>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 类型
  type: { type: String, default: "primary" },
  // 文本内容
  text: { type: String, default: "文本" },
  tagStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.14rem",
      lineHeight: "0.2rem",
      padding: "0.01rem 0.1rem",
      background: '#F53F3F',
      color: '#fff',
    }),
  },
});

const typeClass = computed(() => {
  return {
    success: ["is-border-success", "is-back-success"],
    warn: ["is-border-warn", "is-back-warn"],
    danger: ["is-border-danger", "is-back-danger"],
  }[props.type];
});
</script>

<style lang="less" scoped>
.vpt-tag {
  display: inline-block;
  text-align: center;
  // font-family: HarmonyOS_Sans_SC;
  font-weight: 500;
  font-size: 0.14rem;
  color: #ffffff;
  border-radius: 0.04rem;
  line-height: 0.2rem;
  padding: 0.01rem 0.1rem;
  box-sizing: border-box;
  white-space: nowrap;
}

.vpt-tag-primary {
  background-color: #1ac6ff;
}
</style>